<script setup lang="ts">
import { onBeforeUnmount, reactive, ref } from 'vue';

import { reqPlatformList } from '#/api/exchange-center';
import { reqOrderList } from '#/api/order-collection';
import { reqSupportedSymbolByName } from '#/api/system';

import MockTable from './components/mock-table.vue';
import { column } from './indexcolumn';

interface ISymbol {
  id: number;
  symbol: string;
}
interface IPlatform {
  id: number;
  name: string;
}
interface IForm {
  symbol: string;
  platform: IPlatform | null;
  type: number;
  page: number;
  limit: number;
}
const form = reactive<IForm>({
  symbol: '',
  platform: null,
  type: 2,
  page: 1,
  limit: 20,
});

const symbolList = ref<ISymbol[]>([]);

const orderList = ref<any[]>([]);

const timer = ref(); // 定时器
const platformList = ref<IPlatform[]>([]);
// 获取平台列表
const getPlatformList = () => {
  reqPlatformList().then((res: any) => {
    platformList.value = res.list;
  });
};
getPlatformList();

// 获取合约列表
const getSymbolList = () => {
  reqSupportedSymbolByName(form.platform!.name).then((res: any) => {
    symbolList.value = res;
  });
};

const buttonClickLoading = ref(false);

// 获取挂单列表 type: 1 所有订单 2 挂单 3 历史订单
const getPendingOrderList = () => {
  // if (!form.symbol) {
  //   clearT();
  //   return;
  // }

  const params = {
    platform_id: form.platform!.id,
    symbol: form.symbol,
    type: 2,
    page: 1,
    limit: 2000,
  };

  reqOrderList(params)
    .then((res) => {
      orderList.value = res.list || [];
    })
    .finally(() => {
      buttonClickLoading.value = false;
    });
};

const handlePlatformChange = () => {
  form.symbol = '';
  if (!form.platform) return;
  if (form.platform!.name) {
    getSymbolList();
  }
};
// 查询
const onSubmit = () => {
  // if (!form.symbol) return;
  if (!form.platform || !form.platform!.id) return;
  buttonClickLoading.value = true;
  clearT();
  getPendingOrderList();
  orderList.value.length > 0 && loopQuery();
};
const clearT = () => {
  window.clearInterval(timer.value);
  timer.value = null;
};

// 循环请求接口
const loopQuery = () => {
  timer.value = window.setInterval(() => {
    getPendingOrderList(); // 请求数据
  }, 3000);
};

onBeforeUnmount(() => {
  clearT();
});
</script>

<template>
  <div class="flex gap-4 p-4">
    <el-card class="w-full xl:w-[500px]">
      <MockTable />
    </el-card>
    <el-card class="log-list-container flex-1">
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item>
          <el-select
            v-model="form.platform"
            placeholder="请选择查询平台"
            value-key="id"
            clearable
            @change="handlePlatformChange"
          >
            <el-option
              v-for="item in platformList"
              :key="item.id"
              :label="item.name"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="form.symbol"
            placeholder="请选择查询合约"
            clearable
            value-key="id"
          >
            <el-option
              v-for="item in symbolList"
              :key="item.id"
              :label="item.symbol"
              :value="item.symbol"
            />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            @click="onSubmit"
            :loading="buttonClickLoading"
          >
            查询
          </el-button>
        </el-form-item>
      </el-form>
      <ReTable :columns="column" :data="orderList" border style="width: 100%" />
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>
